


        .news nav{
            background: #ededed;
            height: 100px;
            line-height: 100px;
            text-align: center;
        }
        .news nav.pc a{
            position: relative;
            display: inline-block;
            line-height: 27px;
            vertical-align: middle;
            padding: 0px 3px;
            font-size: 14px;
            border-bottom: 2px solid transparent;
            transition: color .7s;
            margin: 0px 54px;
        }
        .news nav a:after{
            content: '';
            position: absolute;
            width: 0%;
            left: 0px;
            height: 2px;
            bottom: -2px;
            background: #c6be9f;
            transition: width .7s;
        }
        .news nav a:hover,
        .news nav a.current{
            color: #c0b594;
        }
        .news nav a:hover:after,
        .news nav a.current:after{
            width: 100%;
        }

        .news nav.mobile{
            text-align: left;
            z-index: 3;
            position: relative;
        }
        .news nav.mobile .contn{
            display: inline-block;
            width: 130px;
            vertical-align: middle;
            position: relative;
            margin-left: 4%;
            font-size: 12px;
        }
        .news nav.mobile .contn>*{
            cursor: pointer;
        }
        .news nav.mobile .contn .present{
            height: 40px;
            line-height: 40px;
            box-sizing: content-box;
            border: 2px solid #c6be9f;
            padding-left: 10px;
            position: relative;
        }
        .news nav.mobile .contn .present:after{
            content: '';
            border-top: 6px solid #000;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            position: absolute;
            top: calc(50% - 3px);
            right: 10px;
            transition: color .7s;
        }
        .news nav.mobile .contn .sonMenu{
            height: 0px;
            width: 100%;
            transition: height .5s;
            overflow: hidden;
            position: absolute;
            top: 100%;
            left: 0px;
        }
        .news nav.mobile .contn .sonMenu .box{
            background: #fff;
            padding: 10px;
        }
        .news nav.mobile .contn .sonMenu .box a{
            padding: 0px 6px;
            margin-bottom: 7px;
            line-height: 27px;
            display: block;
            position: relative;
            border-bottom: 2px solid transparent;
        }

        .news .newest{
            padding: 90px 0px;
            background: #20242a;
        }
        .news .newest .box{
            width: 100%;
            max-width: 1420px;
            padding: 0px 30px;
            margin: 0 auto;
            position: relative;
        }
        .news .newest .box .pic{
            width: 57%;
            z-index: 2;
            position: relative;
            transform: translateX(-100px);
        }
        .news .newest .box .pic:after{
            content: '';
            position: absolute;
            z-index: -1;
            bottom: -38px;
            left: -19px;
            width: 315px;
            height: 333px;
            background: url(../img/common/squareBg.png) no-repeat;
            transition: transform .8s,opacity .8s;
            transition-delay: .5s;
            opacity: 0;
            transform: translate(100px,-100px);
        }
        .news .newest .box.frozen .pic:after{
            transform: translate(0px,0px);
            opacity: 1;
        }
        .news .newest .box .pic:before,
        .news .newsList .cls .box .item .pic:before{
            content: '';
            position: absolute;
            background: #000;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            opacity: 0;
            transition: .7s opacity;
            z-index: 2;
            pointer-events: none;
        }
        .news .newest .box .pic:hover:before,
        .news .newsList .cls .box .item .pic:hover:before{
            opacity: .2;
        }
        .news .newest .box .pic,
        .news .newsList .cls .box .item .pic{
            display: block;
            position: relative;
        }
        .news .newest .box .pic img,
        .news .newsList .cls .box .item .pic img{
            width: 100%;
            height: auto;
            display: block;
        }
        .news .newest .box>*,
        .news .newsList .cls .box .item{
            opacity: 0;
            transition: opacity 1s,transform 1s;
        }
        .news .newsList .cls .box .item{
            transition-duration: .8s;
        }
        .news .newest .box.frozen>*,
        .news .newsList .cls .box .item.frozen{
            opacity: 1;
            transform: translateX(0px) !important;
        }
        .news .newest .txt{
            position: absolute;
            transform: translateX(100px);
            top: 6%;
            bottom: 6%;
            right: 30px;
            left: 56%;
            margin: auto;
            height: 92%;
            padding: 10px 4%;
            flex-direction: column;
            align-items: flex-start;
            color: #d2d2d1;
            opacity: 0;
            z-index: 2;
        }
        .news .newsList .cls .box .txt .ttl,
        .news .newest .txt .ttl{
            font-size: 32px;
            font-weight: bold;
            line-height: 43px;
            margin-bottom: 12px;
            display: block;
            transition: color .7s;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            white-space: normal;
            word-break: break-all;
        }
        .news .newsList .cls .box .txt .ttl:hover,
        .news .newest .txt .ttl:hover{
            color: #c6be9f;
        }
        .news .newest .txt .category{
            color: #d2d2d2;
        }
        .news .newList .category a:hover{
            color: #000;
        }
        .news .newsList .cls .box .txt .t,
        .news .newest .txt .t{
            font-size: 16px;
            margin-bottom: 15px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 5;
            white-space: normal;
            word-break: break-all;
        }
        .news .newsList .cls .box .txt .ttl,
        .news .newest .txt .ttl{
            color: #fff;
        }
        .news .newest .txt .moreBox,
        .news .newsList .cls .box .txt .moreBox{
            display: inline-block;
        }
        .news .newest .txt>span{
            position: absolute;
            background: #fff;
        }
        .news .newest .txt .hor{
            height: 6px;
            width: 0%;
        }
        .news .newest .txt .ver{
            width: 6px;
            height: 0%;
        }
        .news .newest .box.frozen .txt .hor{
            transition: width .25s linear;
        }
        .news .newest .box.frozen .txt .ver{
            transition: height .25s linear;
        }
        .news .newest .txt .tp,
        .news .newest .txt .tp + *{
            top: 0px;
        }        
        .news .newest .txt .rht,
        .news .newest .txt .rht + *{
            right: 0px;
        }
        .news .newest .txt .btm,
        .news .newest .txt .btm + *{
            bottom: 0px;
        }
        .news .newest .txt .lft,
        .news .newest .txt .tp{
            left: 0px;
        }
        .news .newest .box.frozen .txt .rht{
            transition-delay: .25s;
        }
        .news .newest .box.frozen .txt .btm{
            transition-delay: .5s;
        }
        .news .newest .box.frozen .txt .lft{
            transition-delay: .75s;
        }

        .news .newest .box.frozen .txt .ver{
            height: 100%;
        }
        .news .newest .box.frozen .txt .hor{
            width: 100%;
        }

        .news .newsList{
            padding: 60px 0px;
            background: #ededed;
        }
        .news .newsList .cls{
            overflow: hidden;
        }
        .news .newsList .cls .box{
            margin-top: 45px;
            margin-left: -70px;
            flex-wrap: wrap;
        }
        .news .newsList .cls .box .item{
            width: 50%;
            padding-left: 70px;
            padding-bottom: 110px;
        }
        .news .newsList .cls>.ttl{
            font-size: 22px;
            font-weight: bold;
            text-align: center;
            position: relative;
            padding-bottom: 35px;
            opacity: 0;
            transform: translateY(-150px);
            transition: opacity .8s,transform .8s;
        }
        .news .newsList .cls>.ttl.frozen{
            opacity: 1;
            transform: translateY(0px);
        }
        .news .newsList .cls>.ttl:after,
        .news .newsList .cls>.ttl:before{
            content: '';
            position: absolute;
            bottom: 0px;
            width: 9px;
            height: 9px;
            border: 2px solid #bdb297;
            left: calc(50% - 8px);
            transform: rotate(45deg);
            transition: transform .5s .6s;
        }
        .news .newsList .cls>.ttl.frozen:before{
            transform: translateX(-10px) rotate(45deg);
        }
        .news .newsList .cls>.ttl.frozen:after{
            transform: translateX(10px) rotate(45deg);
        }
        .news .newsList .cls>.ttl span:after{
            content: '';
            position: absolute;
            bottom: 0px;
            width: 9px;
            height: 9px;
            border: 2px solid #bdb297;
            left: calc(50% - 8px);
            transform: rotate(45deg);
            transition: transform .5s .6s;
        }
        .news .newsList .cls .box .item:nth-child(odd){
            transform: translateX(-50px);
        }
        .news .newsList .cls .box .item:nth-child(even){
            transform: translateX(50px);
        }
        .news .newsList .cls .box .txt .ttl{
            margin-top: 35px;
            color: #000;
            font-size: 30px;
        }
        .news .newsList .cls .box .txt .t{
            font-size: 18px;
        }


        @media(max-width:1430px){
            .news .newsList .cls{
                width: 100%;
                padding: 0px 15px;
            }
        }

        @media(max-width:1250px){
            .news .newsList .cls .box .txt .ttl, 
            .news .newest .txt .ttl{
                line-height: 1.5;         
            }
            .news .newest .txt .ttl{
                font-size: 22px;
            }
            .news .newsList .cls .box .txt .ttl{
                font-size: 20px;
            }
            .news .newsList .cls .box .txt .t, 
            .news .newest .txt .t{
                line-height: 1.6;
            }
            .news .newsList .cls .box .txt .t{
                font-size: 16px;
            }
            .news .newest .txt .t{
                font-size: 14px;
            }
        }

        @media(max-width:1024px){
            .news .newest{
                padding: 66px 0px;
            }
            .news .newest .box{
                flex-direction: column;
            }
            .news .newest .box .pic{
                width: 90%;
            }
            .news .newest .txt{
                position: initial;
                height: initial;
                width: 92%;
                margin-top: 35px;
                padding: 0px;
            }
            .news .newest .txt>span{
                display: none;
            }
            .news .newest .txt .ttl{
                font-size: 32px;
            }
            .news .newest .txt .t{
                font-size: 16px;
            }
            .news .newest .box .pic:after{
                bottom: -15px;
                height: 230px;
            }
            .news .newsList .cls .box{
                margin-left: -55px;
            }
            .news .newsList .cls .box .item{
                padding-bottom: 80px;
                padding-left: 55px;
            }
            .news .newsList .cls .box .txt .t{
                font-size: 14px;
            }
        }
        @media(min-width:768px){
            .news nav.mobile{
                display: none;
            }
        }
        @media (max-width:767px){
            .news nav.pc{
                display: none;
            }
            .news .newest .box{
                padding: 0px 4%;
            }
            .news .newest .box .pic{
                width: 95%;
                margin-left: 5%;
            }
            .news .newest .box .pic:after{
                height: 150px;
            }
            .news .newsList .cls .box{
                margin-left: 0px;
            }
            .news .newsList .cls .box .item{
                width: 100%;
                padding-left: 0px;
                padding-bottom: 60px;
            }
            .news .newest .txt .ttl{
                font-size: 20px;
            }
            .news .newsList .cls .box .txt .ttl{
                font-size: 18px;
            }
            .news .newest .txt .t{
                font-size: 14px;
            }
            .news .newsList .cls .box .txt .t{
                font-size: 12px;
            }
            
        }